<template>
  <div class="containers">
    <div class="canvas" ref="canvas"/>
    <!-- <div class="toolbar">
      <a title="download">下载</a>
      <a ref="saveDiagram" href="javascript:void()" title="download BPMN diagram">BPMN</a>
      <a ref="saveSvg" href="javascript:void()" title="download as SVG image">SVG</a>
    </div>-->
    <create-property-panel ref="bpmnPanel" v-if="bpmnModeler" :modeler="bpmnModeler" @inputFileType="inputFileType"
                    @outputFileType="outputFileType" @descriptionType="descriptionType"/>
  </div>
</template>

<script>
  // import BpmnModeler from 'bpmn-js/lib/Modeler' // bpmn-js 设计器
  import CreateModeler from './custom/CreateModeler'
  import ModifyModeler from './custom/ModifyModeler'
  import createPropertyPanel from './CreatePropertyPanel' // 属性面板
  import {initialDiagram} from './BpmnData'
  import customModule from './customPalette'
  import customTranslate from './customTranslate/customTranslate'

  export default {
    props: {
      processKey: {
        type: String
      }
    },
    data() {
      return {
        bpmnModeler: null,
        modelSource: ''
      }
    },
    components: {
      createPropertyPanel
    },
    watch: {
      processKey(nv, ov) {
      }
    },
    methods: {
      initModeler() {
        const canvas = this.$refs.canvas
        // 生成实例
        this.bpmnModeler = new CreateModeler({
          container: canvas,
          additionalModules: [
            // customModule,
            {
              // translate: ['value', customTranslate]
            }
          ]
        })

      },
      initExport() {
        // 获取a标签dom节点
        const downloadLink = this.$refs.saveDiagram
        const downloadSvgLink = this.$refs.saveSvg
        // 监听流程图改变事件
        const _this = this
        this.bpmnModeler.on('commandStack.changed', function () {
          _this.saveSVG().then(function (err, svg) {
            _this.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
          })
          _this.saveDiagram().then(function (err, xml) {
            _this.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
          })
        })
      },
      initDiagram() {
        this.$nextTick(()=>{
          this.$refs.bpmnPanel.clearFields();
        })
        this.bpmnModeler.importXML(initialDiagram)
      },
      async loadDiagram(source) {
        try {
          const result = await this.bpmnModeler.importXML(source)
        } catch (e) {
          this.bpmnModeler.importXML(initialDiagram)
        }
      },
      // 下载为SVG格式,done是个函数，调用的时候传入的
      async saveSVG() {
        // 把传入的done再传给bpmn原型的saveSVG函数调用
        return await this.bpmnModeler.saveSVG()
      },
      // 下载为SVG格式,done是个函数，调用的时候传入的xml
      async saveDiagram() {
        // 把传入的done再传给bpmn原型的saveXML函数调用
        return await this.bpmnModeler.saveXML({format: true})
      },
      // 当图发生改变的时候会调用这个函数，这个data就是图的xml
      setEncoded(link, name, data) {
        // 把xml转换为URI，下载要用到的
        const encodedData = encodeURIComponent(data)
        // 获取到图的xml，保存就是把这个xml提交给后台
        this.modelSource = data
        // 下载图的具体操作,改变a的属性，className令a标签可点击，href令能下载，download是下载的文件的名字
        if (data) {
          link.className = 'active'
          link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
          link.download = name
        }
      },
      inputFileType(properties) {
        this.$emit('inputFileType', properties)
      },
      outputFileType(properties) {
        this.$emit("outputFileType", properties)
      },
      descriptionType(properties) {
        this.$emit("descriptionType", properties)
      }
/*      startType(properties) {
        this.$emit("startType", properties)

      },
      endType(properties) {
        this.$emit("endType", properties)
      }*/
    },
    mounted() {
      // 初始化
      this.initModeler()
      // 初始化导出按钮
      // this.initExport()
    }
  }
</script>

<style lang="scss">
  /*左边工具栏以及编辑节点的样式*/
  @import '~bpmn-js/dist/assets/diagram-js.css';
  @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

  .containers {
    // position: absolute;
    background-color: #ffffff;
    width: 100%;
    height: 100%;

    .canvas {
      width: 100%;
      height: 100%;
    }

    .panel {
      position: absolute;
      right: 0;
      top: 50px;
      width: 300px;
    }

    .bjs-powered-by {
      display: none;
    }

    .toolbar {
      position: absolute;
      top: 20px;
      right: 350px;

      a {
        text-decoration: none;
        margin: 5px;
        color: #409eff;
      }
    }
  }
</style>
